<script>
export default {
  name: 'CarbonSinkAnalysis',
  props: {
    queryParams: {
      required: false,
      default: {}
    },
    projectList: {
      required: false,
      default: []
    }
  },
  computed: {
    getProjectNames() {
      return this.projectList.filter(project => this.queryParams.sceneProjectId == null || project.value === this.queryParams.sceneProjectId)
        .map(project => project.label).join('，')
    },
    getMaxData() {
      if (this.dataList.length > 0) {
        return this.dataList.slice().sort((a, b) => b.carbonEmission - a.carbonEmission)[0]
      }
      return {}
    },
    getMinData() {
      if (this.dataList.length > 0) {
        return this.dataList.slice().sort((a, b) => a.carbonEmission - b.carbonEmission)[0]
      }
      return {}
    },
    getMaxTypeData() {
      const maxType = this.getMaxData.type
      return maxType === undefined ? {} : this.typeList.find(typeItem => typeItem.value === maxType) || {}
    },
    getMinTypeData() {
      const minType = this.getMinData.type
      return minType === undefined ? {} : this.typeList.find(typeItem => typeItem.value === minType) || {}
    }
  },
  watch: {
    queryParams: {
      async handler(val) {
        if (val.sceneProjectId) {
          const param = {
            statisticsMode: val.statisticsMode,
            solidifyDateStart: val.startTime,
            solidifyDateEnd: val.endTime,
            sceneProjectId: val.sceneProjectId
          }
          if (val.roomInfo != null && val.roomInfo.length > 0) {
            param.sceneEdificeId = val.roomInfo[0]
            param.sceneFloorId = val.roomInfo.length > 1 ? val.roomInfo[1] : null
            param.sceneRoomId = val.roomInfo.length > 2 ? val.roomInfo[2] : null
          }
          const res = await this.$api.carbonEmissionReport.carbonSinkOverview(param)
          this.startTime = res.data.startDate
          this.endTime = res.data.endDate
          this.dataList = res.data.dataList
        }
      },
      deep: true,
      immediate: true
    }
  },
  data() {
    return {
      startTime: null,
      endTime: null,
      typeList: [],
      dataList: []
    }
  },
  created() {
    this.loadCarbonSinkData()
  },
  methods: {
    async loadCarbonSinkData() {
      const res = await this.$api.commonSelected({
        code: 'CarbonSinkSelected',
      })
      this.typeList = res.data
    }
  }
}
</script>

<template>
  <div>
    <h2>07 碳汇情况分析</h2>
    <div class="analysis-box">
      <div>
        <table style="width: 60%; margin: 0 15%">
          <thead>
          <tr>
            <th>绿化名称</th>
            <th>绿地面积（㎡）</th>
            <th>碳汇（kgCO2）</th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="(item,index) in dataList" :key="`${item.type}_${index}`">
            <td>{{ typeList.find(typeItem => typeItem.value === item.type).label }}</td>
            <td>{{ item.area }}</td>
            <td>{{ item.carbonEmission }}</td>
          </tr>
          </tbody>
        </table>
        <div style="margin: 0 15%">
          <p>植被在特定时间段内对二氧化碳的吸收量。{{ getProjectNames }}在 {{ startTime }}- {{ endTime }}中，
            绿地总面积为{{ dataList.map(item => item.area).reduce((accumulator, currentValue) => accumulator + currentValue, 0)
            }}㎡，
            碳汇总量为
            {{ dataList.map(item => item.carbonEmission).reduce((accumulator, currentValue) => accumulator + currentValue, 0)
            }}kgCO2。
            {{ getMaxTypeData.label }}的碳汇量最高，为{{ getMaxData.carbonEmission }} kgCO2；
            {{ getMinTypeData.label }}的碳汇量最低，为{{ getMinData.carbonEmission }} kgCO2。</p>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
table {
  border-collapse: collapse;
  width: 80%;
  margin: 0 10%;
  font-size: 16px;
  font-weight: 500;

  th {
    border: 1px solid rgba(0, 0, 0, 0.6);
    padding: 6px 10px;
    background-color: rgb(2, 149, 144);
    text-align: center;
  }

  td {
    border: 1px solid #000000;
    padding: 6px 10px;
    text-align: center;
  }
}

p {
  text-indent: 2em;
  line-height: 24px;
}
</style>
